<template>
  <div>
    <div class="block" style="margin-bottom: 20px;">
      <span class="demonstration" style="margin-right: 20px;">选择日期</span>
      <el-date-picker style="margin-right: 20px;"
          v-model="value1"
          type="daterange"
          align="left"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
      </el-date-picker>
      <el-button plain>今日</el-button>
      <el-button plain>近7日</el-button>
      <el-button plain>近30日</el-button>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="statisticDate"
          label="日期">
      </el-table-column>
      <el-table-column
          prop="totalOrders"
          label="总运单数量">
      </el-table-column>
      <el-table-column
          prop="abnormalOrders"
          label="异常运单数量">
      </el-table-column>
      <el-table-column
          prop="abnormalRate"
          label="异常率">
      </el-table-column>
      <el-table-column
          prop="completed"
          label="处理完成">
      </el-table-column>
      <el-table-column
          prop="unprocessed"
          label="未处理">
      </el-table-column>
      <el-table-column
          prop="processing"
          label="处理中">
      </el-table-column>
      <el-table-column
          prop="completionRate"
          label="完成率">
      </el-table-column>
      <el-table-column
          prop="averageProcessingTime"
          label="平均处理时常">
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.pageNum"
          :page-sizes="[2, 3, 5, 10]"
          :page-size="this.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>



<script>
import axios from "axios";

export default {
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.findTransportAll();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findTransportAll();
    },
    findTransportAll(){
      axios.get(`http://localhost:10086/statistical/transport/findTransportAll/${this.pageNum}/${this.pageSize}`)//?pageNum=${this.pageNum}&pageSize=${this.pageSize}
          .then(response => {
            if(response.data.code === 200) { // 假设你的 Result 对象中有 code 字段表示请求状态
              console.log("获取异常数据成功",response.data);
              this.tableData = response.data.data.list;
              this.total = response.data.data.total;
            }else {
              console.error("获取异常数据失败:",response.data.message);
            }
          })
          .catch(error => {
            console.error("请求异常数据失败:",error);
          });
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: []
    }
  },
  mounted() {
    this.findTransportAll();
  }
}

</script>